<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="format-detection" content="telephone=no">
		<title>Insert title here</title>
		<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
		<style>
			.tab{
				line-height:40px;
			}
			.tab.active{
				background-color:#18B2ED;
				color:white;
			}
		</style>
	</head>
	<body>
		<div id="section_container">
			<section id="section1" data-role="section" class="active">
				<header>
					<div class="titlebar text-center">
						<h2>hellow</h2>
					</div>
				</header>
				<article id="article1" data-transition="slide" data-scroll="verticle" data-role="article" class="">
					<div class="scroller">
							<ul class="list">
								<li>
									<div style="height:50px"> <span>我是主标题</span></div>
								</li>
								<li>
									<div style="height:50px"> <span>我是主标题</span></div>
								</li>
								<li>
									<div style="height:50px"> <span>我是主标题</span></div>
								</li>
								<li>
									<div style="height:50px"> <span>我是主标题</span></div>
								</li>
								<li>
									<div style="height:50px"> <span>我是主标题</span></div>
								</li>
								<li>
									<div style="height:50px"> <span>我是主标题</span></div>
								</li>
								<li>
									<div style="height:50px"> <span>我是主标题</span></div>
								</li>
								<li>
									<div style="height:50px"> <span>我是主标题</span></div>
								</li>
								<li>
									<div style="height:50px"> <span>我是主标题</span></div>
								</li>
								<li>
									<div style="height:50px"> <span>我是主标题</span></div>
								</li>
								<li>
									<div style="height:50px"> <span>我是主标题</span></div>
								</li>
							</ul>
						</div>
				</article>
				<article id="article2" data-transition="slide" data-role="article" class="" >
					<div id="list_main" data-scroll="pulldown" style="height:300px">
					<div class="scroller">
							<ul id="list_cont"  class="list">
								<li>
									<div style="height:50px"> <span>我是主标题</span></div>
								</li>
								<li>
									<div style="height:50px"> <span>我是主标题</span></div>
								</li>
								<li>
									<div style="height:50px"> <span>我是主标题</span></div>
								</li>
								<li>
									<div style="height:50px"> <span>我是主标题</span></div>
								</li>
								<li>
									<div style="height:50px"> <span>我是主标题</span></div>
								</li>
							</ul>
						</div>
					</div>
				</article>
				<article id="article3" data-transition="slide" data-role="article" class="active">
					
					<div id="list_main2" data-scroll="pulldown" style="height:300px">
					<div class="scroller">
						<span id="but" class="button bg-6 block">按键</span><br />
							<ul id="list_cont2"  class="list">
								<li>
									<div style="height:50px"> <span>我是主标题</span></div>
								</li>
								<script id="template" type="text/html">
									<% for(var i=0;i<listdata.length;i++){
										%>
								       <li>
								       	<div style="height:50px">
								       		 <span style="font-size:1em">[<%=listdata[i].idx%>]<%=listdata[i].title%></span><br>
								       		 <span style="font-size:0.6em;color:sliver"><%=listdata[i].sub_title%></span>
								       		 </div>
								       </li>
									<%
									}%>
								</script>
							</ul>
						</div>
					</div>
				</article>
				<footer>
					<ul class="menubar">
						<li class="tab active"  data-role="tab" data-toggle="article" href="#article1">
							首页
						</li>
						<li class="tab" data-role="tab" data-toggle="article" href="#article2">
							page2
						</li>
						<li class="tab" data-role="tab" data-toggle="article" href="#article3">
							page3
						</li>
					</ul>
				</footer>
			</section>
		</div>
		<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="../assets/third/arttemplate/template-native.js"></script>
		<script src="../assets/third/seedsui/plugin/seedsui/seedsui.min.js"></script>
		<script src="../assets/third/iscroll/iscroll-probe.js"></script>
		<script src="../assets/agile/js/agile.js"></script>
		<script src="../assets/app/js/app.seedsui.js"></script>
		<script>
			$(function(){
				//A.Scroll('#list_main').refresh();
				
				$('#list_main').on('refreshInit',function(){
					var refresh = A.Refresh(this)
					refresh.on('pulldown',function(){
						alert('下拉事件！')
						var html='<li>\
									<div style="height:50px"> <span class="color-9">我来自上边，新的</span></div>\
								</li>';
						$('#list_cont').prepend(html)
						refresh.refresh();
					})
					
					
					refresh.on('pullup',function(){
						alert('上拉事件！')
					})
				})
				
				$('#but').on('click',function(){
					var json={};
					json.listdata = [];
					var idx = 0;
					for(var i=0;i<4;i++){
					var item = {title:"主标题",sub_title:"副标题"}
						item.idx = i;
						json.listdata.push(item);
						idx++;
					}
					
					//var html = A.template('#template').render(json)
					//$('#list_cont2').append(html);
					
					A.template('#template').renderReplace(json,function(h){
						;
					})
					
				})
			})
		</script>
	</body>
</html>